<template >
    <div style="margin-top: 15px;" >
        <el-input  placeholder="请输入内容" v-model="input4" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="编号" value="1"></el-option>
                <el-option label="姓名" value="2"></el-option>
                <el-option label="电话" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" v-on:click="workerFind(input4)" >查询</el-button>
        </el-input>
        <el-table
                v-loading="loading"
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱"
                    width="180">
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin: 15px 0px;"
                prev-text="上一页" next-text="下一页" background
                layout="prev, pager, next, sizes, jumper, total"
                :page-sizes="[5,10,20,40]"
                :page-size="pageSize"
                :total="total"
                :current-page="pageNow"
                @current-change="findPage"
                @size-change="findSize">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        methods:{

            findPage(page){
                console.log("当前页数："+page);
                this.pageNow=page;
                this.findAllTableDataByPage();
            },
            findSize(size){
                console.log("当前页面记录条数："+size);
                this.pageSize=size;
                this.findAllTableDataByPage();
            },
            findAllTableDataByPage(){
                this.$http.get("worker/findByPage?pageNow="+this.pageNow+ "&pageSize=" + this.pageSize).then((res)=>{
                     console.log(res.data.salaries);
                    this.tableData=res.data.salaries;
                    this.total=res.data.total;
                });
            },
            handleSelectionChange(val){
                console.log("handleSelectionChange--",val)
                this.tableChecked=val
            },
            workerFind(input){
                const _this = this
                if(input!==null&&input!==''&&this.select=="1"){
                    this.$http.post("worker/findOne",input).then(function(resp){
                        console.log(resp.data.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="2"){
                    this.$http.post("worker/findByName",input).then(function(resp){
                        console.log(resp.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="3") {
                    this.$http.post("worker/findByPhone", input).then(function (resp) {
                        console.log(resp.data);
                        _this.tableData = resp.data.data
                    })
                }else{
                    this.$http.post("worker/findAll").then(function (resp) {
                        console.log(resp.data.data);
                        _this.tableData = resp.data.data
                    })
                }

            },
    },
        data() {
            return {
                total:0,//总页数，从后台查询
                pageNow:1,//当前页数，默认为1
                pageSize:20,//当前页显示的数据条数，默认为20
                loading: false,
                input1: '餐厅名',
                input2: '订单号',
                input3: '用户号码',
                input4: '',
                select: '请选择',
                tableData: null,
            }
        },
        created(){
            const _this = this
            _this.findAllTableDataByPage();
        }
    }
</script>

<style>
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .page{
        float: right;
    }
</style>